<template>
	<view class="box">
		<div class="top">
			<u-icon name="arrow-down-fill" color="#999999" size="15"></u-icon>全部部门
		</div>
		<div class="con">
			<div class="div" @click="goAct(1)">
				<div class="left"><u-icon name="play-right-fill" color="#999999" size="15"></u-icon>总裁办</div>
				<div  v-show="acti === 1" class="right">
					<u-icon name="checkmark" color="#2979ff" size="15"></u-icon>
				</div>
			</div>
			<div class="div" @click="goAct(2)">
				<div class="left"><u-icon name="play-right-fill" color="#999999" size="15"></u-icon>人事部</div>
				<div  v-show="acti === 2" class="right">
					<u-icon name="checkmark" color="#2979ff" size="15"></u-icon>
				</div>
			</div>
			<div class="div" @click="goAct(3)">
				<div class="left"><u-icon name="play-right-fill" color="#999999" size="15"></u-icon>行政部</div>
				<div  v-show="acti === 3" class="right">
					<u-icon name="checkmark" color="#2979ff" size="15"></u-icon>
				</div>
			</div>
			<div class="div" @click="goAct(4)">
				<div class="left"><u-icon name="play-right-fill" color="#999999" size="15"></u-icon>销售部</div>
				<div  v-show="acti === 4" class="right">
					<u-icon name="checkmark" color="#2979ff" size="15"></u-icon>
				</div>
			</div>
			<div class="div" @click="goAct(5)">
				<div class="left"><u-icon name="play-right-fill" color="#999999" size="15"></u-icon>市场部</div>
				<div  v-show="acti === 5" class="right">
					<u-icon name="checkmark" color="#2979ff" size="15"></u-icon>
				</div>
			</div>
			<div class="div" @click="goAct(6)">
				<div class="left"><u-icon name="play-right-fill" color="#999999" size="15"></u-icon>财务部</div>
				<div  v-show="acti === 6" class="right">
					<u-icon name="checkmark" color="#2979ff" size="15"></u-icon>
				</div>
			</div>
			<div class="div" @click="goAct(7)">
				<div class="left"><u-icon name="play-right-fill" color="#999999" size="15"></u-icon>技术部</div>
				<div  v-show="acti === 7" class="right">
					<u-icon name="checkmark" color="#2979ff" size="15"></u-icon>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acti:0
			}
		},
		methods: {
			goAct(val){
				this.acti = val
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/message/crunch/qmlist/qmlist'
					})
				},200)
			}
		}
	}
</script>

<style scoped lang="scss">
	.box{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		.top{
			width: 100%;
			height: 100rpx;
			border-top: 1rpx solid #f2f2f2;
			border-bottom: 1rpx solid #f2f2f2;
			padding: 20rpx;
			display: flex;
			align-items: center;
		}
		.con{
			width: 100%;
			padding-left: 40rpx;
			// display: flex;
			.div{
				border-bottom: 1rpx solid #f2f2f2;
				display: flex;
				height: 100rpx;
				align-items: center;
				justify-content: space-between;
				padding-right: 10rpx;
				.left{
					display: flex;
					align-items: center;
				}
			}
		}
	}

</style>